<template>
	<view class="baseForm">
		<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
		<!-- 条码录入 -->

		<u--form labelPosition="left" :model="umodel" ref="uForm" class="form" labelWidth="200rpx" errorType="toast">
			<view class="upload-scan">
				<scan-bar id="scanInput" ref="storageUnitScanBarRef" placeholder="扫描包装条码"
					@code-scanned="getStorageUnitByCode" :key="datekey"></scan-bar>
			</view>
			<u-form-item label="仓库" prop="warehouseId" @click="openWarehouseSelect">
				<u--input v-model="umodel.warehouseName" border="none" disabled disabledColor="#ffffff"
					inputAlign="right" placeholder="请选择仓库"></u--input>
				<template #right>
					<u-icon name="arrow-right"></u-icon>
				</template>
			</u-form-item>
			<u-form-item label="存货编码" prop="materialCode">
				<u--input v-model="umodel.materialCode" inputAlign="right" clearable border="none" placeholder="存货编码"
					@clear="handleClear"></u--input>
			</u-form-item>
			<u-form-item label="物料" prop="materialId" @click="openMaterialSelect">
				<u--input v-model="umodel.materialName" border="none" disabled disabledColor="#ffffff"
					inputAlign="right" placeholder="请选择物料"></u--input>
				<template #right>
					<u-icon name="arrow-right"></u-icon>
				</template>
			</u-form-item>



			<u-line></u-line>

		</u--form>

		<!-- 提交按钮 -->
		<button type="primary" @click="search" class="submit_btn" :loading="posting">查 询</button>
		<!-- 标准picker -->
		<u-picker :show="showWarehouse" :columns="warehouses" keyName="warehouseName" immediateChange
			@cancel="showWarehouse = false" @confirm="WarehouseSelect"></u-picker>
		<u-picker :show="showMaterial" :columns="materials" keyName="materialName" immediateChange
			@cancel="showMaterial = false" @confirm="materialSelect"></u-picker>
	</view>
</template>

<script lang="ts" setup>
	import { reactive, ref } from 'vue';
	import { http } from "../../../utils/http";
	import ULine from "../../../uni_modules/uview-plus/components/u-line/u-line.vue";
	import { onShow } from '@dcloudio/uni-app';
	import { useWmsStore } from '@/stores/useWmsStore';
	import ScanBar from '@/components/scan-bar/index.vue';

	// 表单数据定义
	const umodel = reactive({
		materialId: '',
		materialCode: '',
		materialName: '',
		warehouseId: '',
		warehouseCode: '',
		warehouseName: '',
		extenalCode: '',
	});

	const defaultUmodel = {
		materialId: '',
		materialCode: '',
		materialName: '',
		warehouseId: '',
		warehouseCode: '',
		warehouseName: '',
		extenalCode: '',

	};

	const searchDataBack = ref([]);

	let warehouses = reactive([]);
	let materials = reactive([]);

	const showWarehouse = ref(false);
	const showMaterial = ref(false);
	const storageUnitScanBarRef = ref();
	const datekey = ref(new Date());
	onShow(async () => {
		reset();
		getWarehouses();
		getmaterials();
	})

	async function getWarehouses() {
		const data = await http({
			url: '/wms/warehouse/getList',
			method: 'GET',
			data: {}
		});
		warehouses[0] = data.data;
	}

	async function getmaterials() {
		const data = await http({
			url: '/wms/material/queryByList',
			method: 'POST',
			data: {}
		});
		let list = data.data;
		list.forEach(item => {
			item.materialName = `${item.materialCode}-${item.materialName}`
		})
		materials[0] = list;
	}
	async function getStorageUnitByCode(result : any) {
		// setTimeout(()=>{
		// 	storageUnitScanBarRef.value.reset();
		// 	datekey.value= new Date();
		// 	// umodel.extenalCode = '';
		// 	// result = '';
		// },500)
		if (result) {
			try {
				umodel.extenalCode = result;
				const data = await http({
					url: '/wms/storageunit/getin/' + umodel.extenalCode,
					method: 'GET',
					data: {}
				});
				var info = {
					id: data.data.id,
					materialId: data.data.materialId,
					materialCode: data.data.materialCode,
					materialName: data.data.materialName,


				}

				Object.assign(umodel, info);
			} catch (error) {
				console.error("111");
			}
		}
		else {
			umodel.extenalCode = '';
		}
		storageUnitScanBarRef.value.reset();
		datekey.value= new Date();
	}
	function WarehouseSelect(e) {
		if (e.value.length) {
			umodel.warehouseId = e.value[0].id;
			umodel.warehouseName = e.value[0].warehouseName;
			umodel.warehouseCode = e.value[0].warehouseCode;
		}
		showWarehouse.value = false;
	}

	function materialSelect(e) {
		if (e.value.length) {
			umodel.materialId = e.value[0].id;
			umodel.materialName = e.value[0].materialName;
			umodel.materialCode = e.value[0].materialCode;
		}
		showMaterial.value = false;
	}


	function openWarehouseSelect() {
		showWarehouse.value = true;
		uni.hideKeyboard();
	}

	function openMaterialSelect() {
		showMaterial.value = true;
		uni.hideKeyboard();
		complete(umodel.materialCode);
	}
	function complete(materialCode) {
		materials[0] = materials[0].filter(item => {
			// 使用正则表达式进行模糊匹配
			let regex = new RegExp(materialCode, "i"); // "i" 表示忽略大小写
			return regex.test(item.materialCode);
		});
	}
	function handleClear() {
		getmaterials();
	}
	// 校验提交
	const uForm = ref();
	const posting = ref(false);

	async function search() {
		if (!umodel.warehouseId) {
			uni.$u.toast('请选择仓库！');
			return;
		} else if (!umodel.materialId) {
			uni.$u.toast('请选择物料！');
			return;
		} else {
			const data = await http({
				url: '/wms/storageunit/getListForOutbound',
				method: 'POST',
				data: {
					warehouseId: umodel.warehouseId,
					materialCode: umodel.materialCode
				}
			});
			Object.assign(searchDataBack.value, data.data);
			if (searchDataBack.value.length == 0) {
				uni.$u.toast('未找到相应库存！');
				return;
			}
			// 设置、更新加工单信息
			useWmsStore().setStorageUnitDetailInfo(searchDataBack.value);
			uni.navigateTo({
				url: '/pages/use/outbound/list?warehouseId=' + umodel.warehouseId + '&materialId=' + umodel.materialId,
			});
		}
	}

	function reset() {
		Object.assign(umodel, defaultUmodel);
		searchDataBack.value = [];
	}
</script>

<style lang="scss">
	.upload-scan {
		padding: 10px 40rpx 10px 40rpx;
	}

	.baseForm {
		.form {
			padding: $uni-page-padding;
		}

		.submit_btn {
			margin: 20rpx;

		}

		.u-form {
			margin-top: 5px;

			.scan-bar {
				display: flex;
				flex: 1;
			}
		}

		.u-line {
			padding: 10px 0;
		}

		.search {
			display: flex;

			.custom-style {
				// width: 120px;
				margin: 10px 5px 5px;
				height: 36px;
				border-radius: 8px;

				&:nth-child(1) {
					flex: 1
				}

				&:nth-child(2) {
					flex: 3
				}
			}
		}

		.list {
			.list-title {
				line-height: 40px;
				font-size: 14px;
				color: rgba(0, 0, 0, 0.4);
			}

			.card {
				margin-top: 5px;
				margin-bottom: 10px;
				border-radius: 7px;
				display: flex;
				align-items: center;
				padding: 10px 0;
				transition: all 300ms ease;
				box-shadow: 0 0 1px rgba(0, 0, 0, 0.1);

				.left {
					// flex-basis: 90rpx;
					padding-right: 10px;
					text-align: right;
					font-size: 13px;

					.enter {
						line-height: 20px;
						margin-bottom: 5px;
					}

					.number {
						font-size: 13px;
						line-height: 18px;
					}

					:deep(.u-icon--right) {
						flex-direction: row-reverse;
					}
				}

				.right {
					flex: 1;
					padding-left: 15px;

					.title {
						font-size: 15px;
						line-height: 20px;
						margin-bottom: 5px;
					}

					.body {
						color: rgba(0, 0, 0, 0.4);
						font-size: 13px;
						line-height: 18px;
					}
				}
			}
		}
	}
</style>